<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: adminstar
  Date: 2021/12/7
  Time: 18:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="img/logo.png"/>
    <title>物资管理调度系统</title>
    <link href="${pageContext.request.contextPath}/afterEnd/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/afterEnd/css/mmss.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/afterEnd/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/afterEnd/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/afterEnd/js/html5shiv.min.js"></script>
    <script src="${pageContext.request.contextPath}/afterEnd/js/respond.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/afterEnd/layui/layui.js"></script>
</head>
<body>
<header>
    <%@ include file="element/top.jsp" %>
</header>
<script src="${pageContext.request.contextPath}/afterEnd/js/jquery.js"></script>
<script>
    $(function () {
        $('#select').bind('input', find)
        $('#comm-class').bind('change', find)
    })

    function find() {
        const select = $('#select').val()
        const commClass = $('#comm-class').val()
        init()
    }


    window.onload = function () {

        // 商品分类
        $.ajax({
            "url": "/SheepShoppingMall/CommodityClassServlet",
            "type": "post",
            "data": "opr=Classlist",
            "dataType": "json",
            "success": function (data) {
                $("#comm-class").append("<option value=''>全部</option>");
                for (let i = 0; i < data.length; i++) {
                    $("#comm-class").append("<option value='" + data[i].id + "'>" + data[i].className + "</option>");
                    $("#classId").append("<option value='" + data[i].id + "'>" + data[i].className + "</option>");
                }
            }
        })
        var date = new Date();
        init()
    }

    function init(){
        $('#test').html('')
        // 商品信息
        let countPage;
        $.ajax({
            url:'/SheepShoppingMall/CommodityServlet',
            type:'post',
            data:{
                opr: 'countPage',
                name: $('#select').val(),
                type: $('#comm-class').val(),
            },
            success:data => {
                countPage = data
                console.log("页数"+countPage)
            }
        })
        setTimeout(()=>{
            layui.use('laypage', function () {
                var laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
                    , count: countPage //数据总数，从服务端得到
                    , limit: 8
                    , jump: function (obj, first) {
                        //obj包含了当前分页的所有参数，比如：
                        $.ajax({
                            url: '/SheepShoppingMall/CommodityServlet',
                            data: {
                                opr: 'NameAndClass',
                                name: $('#select').val(),
                                type: $('#comm-class').val(),
                                curr: obj.curr,
                                limit: obj.limit
                            },
                            dataType: 'json',
                            success: data => {
                                $("tbody").html('');
                                for (let i = 0; i < data.length; i++) {
                                    $("tbody").append("<tr>" +
                                        "<td>" + data[i].id + "</td>" +
                                        "<td>" + data[i].name + "</td>" +
                                        "<td><img width='80px' height='50px' src=" + data[i].imgUrl5 + "></td>" +
                                        "<td>" + data[i].info + "</td>" +
                                        "<td>" + data[i].className + "</td>" +
                                        "<td>" + data[i].price + "</td>" +
                                        "<td>" + data[i].number + "</td>" +
                                        "<td>" + data[i].count + "</td>" +
                                        "<td width='100px'>" + new Date(data[i].shelfTime).toLocaleDateString() + "</td>" +
                                        "<td>" +
                                        "<a href='#' class='btn btn-primary btn-sm' data-toggle='modal' data-target='#edit'" +
                                        "data-whatever='编辑' onclick='updateMsg("+data[i].id+")'>编辑</a>" +
                                        "<a href='javascript:void(0)' index='" + data[i].id + "' onclick='delid(this)' class='btn btn-primary btn-sm'>删除</a>" +
                                        "</td>" +
                                        "</tr>");
                                }
                            }
                        })
                    }
                })
            })

        },1000)

    }


    function updateMsg(id){
        $.ajax({
            "url":"/SheepShoppingMall/CommodityServlet",
            "type":"post",
            "data":"opr=findId&id="+id,
            "dataType": "json",
            "success": function (data) {
                for (let i = 0; i < data.length; i++) {
                    $("#id").val(id)
                    $("#name").val(data[i].name)
                    $("#image").val(data[i].image)
                    $("#info").val(data[i].info)
                    $("#classId").val(data[i].classId)
                    $("#price").val(data[i].price)
                    $("#diao").val(data[i].number)
                    $("#count").val(data[i].count)
                    $("#shelfTime").val(new Date(data[i].shelfTime).toLocaleDateString())
                }
            }
        })
    }


    function delid(id) {
        let nm = $(id).attr('index')
        let con = confirm("确定删除吗？");
        if (con == true) {
            $.ajax({
                "url": "/SheepShoppingMall/CommodityServlet",
                "type": "post",
                "data": "opr=delid&id=" + nm,
                "success": function (data) {
                    if (data == "true") {
                        alert("删除成功！")
                        init();
                    } else {
                        alert("删除失败！")
                    }
                }
            })
        }
    }
</script>

<section>
    <div class="container-fluid">
        <div class="row">
            <!--左侧导航开始-->
            <%@ include file="element/element.jsp" %>
            <!--左侧导航结束-->
            <!----------------------------------------------------------------------------------------------------->
            <!--右侧内容开始-->
            <div class="col-xs-10">
                <br/>
                <ol class="breadcrumb">
                    <li><a href="index.jsp"><span class="glyphicon glyphicon-home"></span>&nbsp;后台首页</a></li>
                    <li class="active">系统管理 - 表格</li>
                </ol>
                <div class="input-group line left">
                    <span class="input-group-addon" id="basic-addon2"><span
                            class="glyphicon glyphicon-search"></span></span>
                    <input type="text" id="select" class="form-control" placeholder="输入名称关键字搜索"
                           aria-describedby="basic-addon2">
                    <a href="#" class="btn btn-primary btn-sm" data-toggle="modal"
                       style="position: absolute;right: -1000px" data-target="#add1">添加商品</a>
                </div>
                <div class="modal fade" id="add1" tabindex="-1" role="dialog" aria-labelledby="add11">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="add11">添加商品</h4>
                            </div>
                            <form id="addAll" action="${pageContext.request.contextPath}/CommodityServlet?opr=addAll&id=" method="post">
                                <div class="modal-body">
                                    <ul>
                                        <li>
                                            <label><span>商品名称：</span></label>
                                            <input  type="text" name="name"/>
                                        </li>
                                        <li>
                                            <label><span>商品图片：</span></label>
                                            <input  type="text" name="image"/>
                                        </li>
                                        <li>
                                            <label><span>商品详细：</span></label>
                                            <input  type="text" name="info"/>
                                        </li>
                                        <li>
                                            <label><span>商品分类：</span></label>
                                            <select  style="width: 260px;" name="classId">
                                            </select>
                                        </li>
                                        <li>
                                            <label><span>商品单价：</span></label>
                                            <input  type="text" name="price"/>
                                        </li>
                                        <li>
                                            <label><span>商品库存：</span></label>
                                            <input  type="text" name="diao"/>
                                        </li>
                                        <li>
                                            <label><span>商品销数：</span></label>
                                            <input  type="text" name="count"/>
                                        </li>
                                        <li>
                                            <label><span>上架时间：</span></label>
                                            <input  type="date" name="shelfTime"/>
                                        </li>
                                    </ul>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消
                                    </button>
                                    <button type="button" onclick="document.getElementById('addAll').submit();"
                                            class="btn btn-primary btn-sm">保存
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="edit" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel1">编辑</h4>
                            </div>
                            <form id="update" action="${pageContext.request.contextPath}/CommodityServlet?opr=update" method="post">
                                <div class="modal-body">
                                    <ul>
                                        <li>
                                            <label><span>商品名称：</span></label>
                                            <input id="name" type="text" name="name"/>
                                            <input id="id"  name="id" type="hidden">
                                        </li>
                                        <li>
                                            <label><span>商品图片：</span></label>
                                            <input id="image" type="text" name="image"/>
                                        </li>
                                        <li>
                                            <label><span>商品详细：</span></label>
                                            <input id="info" type="text" name="info"/>
                                        </li>
                                        <li>
                                            <label><span>商品分类：</span></label>
                                            <select id="classId" style="width: 260px;" name="classId">
                                            </select>
                                        </li>
                                        <li>
                                            <label><span>商品单价：</span></label>
                                            <input id="price" type="text" name="price"/>
                                        </li>
                                        <li>
                                            <label><span>商品库存：</span></label>
                                            <input id="diao" type="text" name="diao"/>
                                        </li>
                                        <li>
                                            <label><span>商品销数：</span></label>
                                            <input id="count" type="text" name="count"/>
                                        </li>
                                        <li>
                                            <label><span>上架时间：</span></label>
                                            <input id="shelfTime" type="date" name="shelfTime"/>
                                        </li>
                                    </ul>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                                    <button type="button" onclick="document.getElementById('update').submit();"
                                            class="btn btn-primary btn-sm">保存</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <select  class="form-control line left" id="comm-class">

                </select>
                <br/><br/>
                <table class="table table-bordered table-striped text-center bg-info">
                    <thead>
                    <tr class="info">
                        <th class="text-center">商品编号</th>
                        <th class="text-center">商品名称</th>
                        <th class="text-center">商品图片</th>
                        <th class="text-center">商品详细</th>
                        <th class="text-center">商品分类</th>
                        <th class="text-center">商品单价</th>
                        <th class="text-center">商品库存</th>
                        <th class="text-center">商品销售数</th>
                        <th class="text-center">上架时间</th>
                        <th class="text-center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <%--   信息显示--%>
                    </tbody>
                </table>

                <div id="test1"></div>
            </div>
            <!--右侧内容结束-->
        </div>
    </div>
</section>

<footer class="bg-primary navbar-fixed-bottom">
    <p class="text-center text-white">版权所有&copy;MMSS</p>
</footer>
<script src="${pageContext.request.contextPath}/afterEnd/js/jquery-1.11.3.js"></script>
<script src="${pageContext.request.contextPath}/afterEnd/js/bootstrap.js"></script>
<script>
    //    添加编辑模态框
    $('#add').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever') // Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        modal.find('.modal-title').text('' + recipient)
        modal.find('.modal-body input').val(recipient)
    })
</script>
</body>
</html>